import { Button, Checkbox, Form, Input } from 'antd';
import React from 'react';
import { addList } from '../../api'
import { ListItemAddType } from '../../types';
const App: React.FC = () => {
	const onFinish = (values: ListItemAddType) => {
		addList(values).then(data => {
			console.log(data)
		})
	};

	const onFinishFailed = (errorInfo: any) => {
		console.log('Failed:', errorInfo);
	};

	return (
		<Form
			name="basic"
			labelCol={{ span: 2 }}
			wrapperCol={{ span: 22 }}
			initialValues={{ remember: true }}
			onFinish={onFinish}
			onFinishFailed={onFinishFailed}
			autoComplete="off"
		>
			<Form.Item>
				<h1 style={{ textAlign: 'center' }}>列表添加</h1>
			</Form.Item>

			<Form.Item
				label="姓名"
				name="name"
				rules={[{ required: true, message: 'Please input your name!' }]}
			>
				<Input />
			</Form.Item>

			<Form.Item
				label="电话"
				name="tel"
				rules={[{ required: true, message: 'Please input your tel!' }]}
			>
				<Input />
			</Form.Item>

			<Form.Item
				label="状态"
				name="state"
				rules={[{ required: true, message: 'Please input your state!' }]}
			>
				<Input />
			</Form.Item>

			<Form.Item
				label="地址"
				name="address"
				rules={[{ required: true, message: 'Please input your address!' }]}
			>
				<Input />
			</Form.Item>

			<Form.Item
				label="备注"
				name="tips"
				rules={[{ required: true, message: 'Please input your tips!' }]}
			>
				<Input />
			</Form.Item>

			<Form.Item wrapperCol={{ offset: 2, span: 22 }}>
				<Button type="primary" htmlType="submit" block>
					提交
				</Button>
			</Form.Item>

		</Form>
	);
};

export default App;